@charset "utf-8";
*{
	padding: 0;
	margin: 0;
	text-decoration: none;
	list-style: none;
	font-family: 微软雅黑,sans-serif;
	color: #9a9898;
	font-size: 14px;
}
/*1.网页头部：高47px 宽100%*/
header{
	height: 72px;
	width: 100%;
	background-color: #333;
}
/*2.中控区：两侧留白，宽度影响主体，页尾部分*/
div#wrapper{
	width: 1236px;
	height: 72px;
	bac kground-color: #000000;
	/*水平居中*/
	margin: 0 auto;
	
}
/*3.左侧局部：左浮动*/
div#wrapper div.left{
	width: 768px;
	height: 72px;
	bac kground-color: #ffff00;
	float: left;
	
}
/*3.1左侧布局：浮动，高度，*/
div#wrapper div.left ul li{
	float: left;
	bor der: 1px solid red;
	height: 72px;

}
/*3.2 左侧布局：竖条跟文字高度一致，垂直居中*/
div#wrapper div.left ul li a{
	/*所有文本包含左侧边*/
	line-height: 72px;
	border-right: 1px solid #424242;
	/*左右文本有空间*/
	padding: 0 7px;
}
/*3.3 最右侧竖边拿下*/
div#wrapper div.left ul li a.fix{
	border: none;
}
/*4.右侧布局：右浮动*/
div#wrapper div.right{
	width: 450px;
	height: 72px;
	backg round-color: aqua;
	float: right;
}
/*4.1：浮动*/
div#wrapper div.right ul li{

    float: right;
  
}
/*4.2右侧部分 文本居中 */
div#wrapper div.right ul li a{
        border-right: 1px solid #424242;
        line-height: 72px;
        padding: 0 6px;
}
/*4.3右侧 购物车 图标*/
div#wrapper div.right ul li i.shop{
    bor der: 1px solid red;
    padding: 0 10px;
	/*背景图*/
    background: url(../img/buy.png) no-repeat;
    }
/*4.4 右侧 去掉两个竖线*/
    div#wrapper div.right ul li a.fix{
        border: none;
    }
/*4.5右侧 购物车区域：宽度 背景颜色*/
	    div#wrapper div.right ul li.ul_li_right{
	        background-color: #424242;
	        width:115px;
	    }
/*4.6右侧 购物车悬停效果：三个联动：背景色，
                                 背景色结合改超链接
								 背景图*/
	    div#wrapper div.right ul li.ul_li_right:hover{
	        background-color:#fff;
	    }
	    div#wrapper div.right ul li.ul_li_right:hover a{
	        color:#ffaa00;
	    }
	    div#wrapper div.right ul li.ul_li_right:hover i.shop{
	        background: url(../img/buy01.png) no-repeat;
	    }
	    /*结束：添加悬停 颜色 白色*/
	    div#wrapper div.left ul li a:hover,div#wrapper div.right ul li a:hover{
	        color:#fff;
	    }